import React, { PureComponent } from 'react';
import { KpiContainer, KpiCard } from './style';
import {
  BorderBox1,
} from '@jiaminghi/data-view-react';

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentTime: '',
      kpiData: [
        { label: 'PV', value: '68862', icon: '&#xe7ee;' },
        { label: 'UV', value: '981', icon: '&#xe7f7;' },
        { label: '总收藏量', value: '1307', icon: '&#xe790;' },
        { label: '总购买量', value: '684', icon: '&#xe88e;' },
        { label: '用户行为统计', value: '分析', icon: '&#xe6b3;' }
      ]
    };
  }

  componentDidMount() {
    console.log('顶部组件已加载 - 标题和KPI指标分离');
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  }

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  updateTime = () => {
    try {
      const now = new Date();
      const timeString = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit', 
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        weekday: 'long'
      });
      this.setState({ currentTime: timeString });
    } catch (error) {
      console.error('时间更新失败:', error);
    }
  };

  render() {
    const { currentTime, kpiData } = this.state;
    
    return (
      <>
        {/* 顶部标题和时间 */}
        <div className="header-section">
          <h1 className="main-title">
            淘宝用户行为可视化概览
            <span className="title-decoration">◆</span>
          </h1>
        </div>
        
        {/* 时间显示 */}
        <div className="time-display">
          {currentTime}
        </div>
        
        {/* KPI指标区域 */}
        <div className="kpi-section">
          <KpiContainer>
            {kpiData.map((item, index) => (
              <KpiCard key={index}>
                <BorderBox1 className='kpi-border'>
                  <div className="kpi-content">
                    <div className="kpi-value">{item.value}</div>
                    <div className="kpi-label">{item.label}</div>
                  </div>
                </BorderBox1>
              </KpiCard>
            ))}
          </KpiContainer>
        </div>
      </>
    );
  }
}

export default index;
